<!--分页标题-->
<template>
    <div class="tab_title">
      <div class="nav">
        <a @click.stop="change(index)" v-for="(item,index) in tabList" :key="item.tabId"><span  v-bind:class="[{isActive:item.isActive}]">{{item.tabTitle}}</span></a>
      </div>
    </div>
</template>

<script>
  import eventVue from '@/assets/eventVue.js'
  export default {
    props: ['tabList'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted () {
      this.order()
    },
    methods: {
      order: function () {
        this.$http.get('./static/data/classdata.json').then((msg) => {
          eventVue.$emit('myFun', msg.body.tab.tabList[0].fenleiTabList)
        })
      },
      change: function (index) {
        var _this = this
        for (var i = 0; i < _this.tabList.length; i++) {
          _this.tabList[i].isActive = false
        }
        _this.tabList[index].isActive = !_this.tabList[index].isActive
        /* 获取分类数据 */
        eventVue.$emit('myFun', this.tabList[index].fenleiTabList)
      }
    }
  }
</script>
<style>
  .tab_title{
    height: 41px;
    background: #fff;
    margin-bottom: 14px;
  }
  .tab_title .nav  a{
    display: block;
    float: left;
    width:33.33% ;
    height: 100%;
    text-align: center;
    cursor:pointer;
  }
  .tab_title .nav  a span{
    display: inline-block;
    width: auto;
    height: 100%;
    line-height: 41px;
    font-size: 14px;

    color:#333;
  }
  .tab_title .nav  a span.isActive{
    color:#fd6003;
    border-bottom: 2px solid #fd6003;
  }
</style>
